<template>
  <div class="flex-box bg-grey" style="position: relative" align-items="stretch" border-all>
    <div
      v-for="crumb in crumbs"
      :key="crumb.key"
      class="flex-box crumb-item"
      :class="{ 'bg-primary': crumb.key === activeCrumb }"
      style="width: 100px; position: relative"
      justify-content="center"
      text-align="center"
      flex-auto
      @click="crumbClicked(crumb)"
    >
      <span :class="{ 'text-white': crumb.key === activeCrumb }">{{ crumb.name }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'CmpCrumbs',
    props: {
      crumbs: {
        type: Array,
        default: () => {
          return []
        }
      },
      activeCrumb: {
        type: String,
        default: ''
      }
    },
    methods: {
      crumbClicked (crumb) {
        this.$emit('crumbclick', crumb)
      }
    }
  }
</script>
<style scoped>
.crumb-item:not(:last-child) {
  margin-right: 2px;
}
.crumb-item:not(:last-child):after {
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #f5f5f5;
  position: absolute;
  right: -20px;
  top: 0;
  z-index: 5;
}
.crumb-item.bg-primary:not(:last-child):after {
  border-left: 20px solid #008cd6;
}
.crumb-item:not(:first-child):before {
  content: '';
  border-top: 20px solid #f5f5f5;
  border-bottom: 20px solid #f5f5f5;
  border-left: 20px solid rgba(0, 0, 0, 0.05);
  position: absolute;
  left: 0;
  top: 0;
}
.crumb-item.bg-primary:not(:first-child):before {
  border-top: 20px solid #008cd6;
  border-bottom: 20px solid #008cd6;
}
</style>
